<script setup>
import { ref, computed, onMounted } from 'vue';
import { refundDetailByIdService, refundReasonByIdService } from '@/api/order';
import { useRoute } from 'vue-router'

// 路由参数
const route = useRoute()

// 退单数据
const orderReturn = ref({})

// 订单数据
const order = ref({})

// 订单项数据
const orderItems = ref([])

// 状态映射
const statusMap = {
    1: '待处理',
    2: '退货中',
    3: '已完成',
    4: '已拒绝'
}

onMounted(() => {
    // 获取退单详情
    getOrderReturn(route.params.id);
})

// 获取退单详情
const getOrderReturn = async (id) => {
    const result = await refundDetailByIdService(id);
    orderReturn.value = result.data.orderReturnApplyDTO;
    orderReturn.value.reason = result.data.orderReturnReasonDTO.reason;
    order.value = result.data.orderDTO;
    orderItems.value = result.data.orderItemDTOList;
};

// 计算状态
const displayStatus = computed(() => {
    return statusMap[orderReturn.value.status] || '未知状态'
})

// 计算总价
const totalPrice = computed(() => {
    return orderItems.value.reduce((acc, item) => acc + (item.productPrice * item.productQuantity), 0);
});

// 解析规格属性
const parseAttributes = (specs) => {
    try {
        const parsed = JSON.parse(specs);
        return Object.entries(parsed).map(([key, value]) => `${key}: ${value.join(',')}`).join(' ');
    } catch (e) {
        return specs;
    }
}
</script>

<template>
    <div class="order-detail">
        <!-- 商品信息 -->
        <el-card class="box-card">
            <template #header>
                <span>退货商品</span>
            </template>
            <el-table :data="orderItems" style="width: 100%">
                <el-table-column prop="productPic" label="商品图片" width="120">
                    <template #default="scope">
                        <img :src="scope.row.productPic" alt="商品图片" style="width: 80px; height: 80px;">
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品名称"></el-table-column>
                <el-table-column prop="productPrice" label="价格/货号">
                    <template #default="scope">
                        价格：￥{{ scope.row.productPrice }} 货号：NO.{{ scope.row.productId }}
                    </template>
                </el-table-column>
                <el-table-column label="规格">
                    <template #default="scope">
                        {{ parseAttributes(scope.row.specs) }}
                    </template>
                </el-table-column>
                <el-table-column prop="productQuantity" label="数量"></el-table-column>
                <el-table-column label="小计">
                    <template #default="scope">
                        ￥{{ scope.row.productPrice * scope.row.productQuantity }}
                    </template>
                </el-table-column>
            </el-table>
            <div class="total-price">合计：￥{{ totalPrice }}</div>
        </el-card>

        <!-- 服务单信息 -->
        <el-card class="box-card">
            <template #header>
                <span>服务单信息</span>
            </template>
            <el-descriptions title="" :column="2" border>
                <el-descriptions-item label="服务单号">{{ orderReturn.id }}</el-descriptions-item>
                <el-descriptions-item label="申请状态">{{ displayStatus }}</el-descriptions-item>
                <el-descriptions-item label="订单编号">{{ order.orderNumber }}</el-descriptions-item>
                <el-descriptions-item label="申请时间">{{ orderReturn.createDate }}</el-descriptions-item>
                <el-descriptions-item label="用户账号">{{ orderReturn.userId }}</el-descriptions-item>
                <el-descriptions-item label="联系人">{{ orderReturn.returnName }}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{ orderReturn.returnPhone }}</el-descriptions-item>
                <el-descriptions-item label="退货原因">{{ orderReturn.reason }}</el-descriptions-item>
                <el-descriptions-item label="问题描述">{{ orderReturn.problemDescription || '无' }}</el-descriptions-item>
                <el-descriptions-item label="凭证图片">
                    <span v-if="!orderReturn.proofPics">无凭证图片</span>
                </el-descriptions-item>
                <el-descriptions-item label="订单金额">￥{{ order.totalPrice }}</el-descriptions-item>
                <el-descriptions-item label="确认退款金额">￥{{ orderReturn.returnAmount }}</el-descriptions-item>
                <el-descriptions-item label="收货人姓名">{{ orderReturn.receiveMan || '暂无' }}</el-descriptions-item>
                <el-descriptions-item label="所在区域">{{ orderReturn.region || '暂无' }}</el-descriptions-item>
                <el-descriptions-item label="详细地址">{{ orderReturn.detailAddress || '暂无' }}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{ orderReturn.returnPhone }}</el-descriptions-item>
                <el-descriptions-item label="处理人员">{{ orderReturn.handleMan }}</el-descriptions-item>
                <el-descriptions-item label="处理时间">{{ orderReturn.handleTime }}</el-descriptions-item>
                <el-descriptions-item label="处理备注">{{ orderReturn.handleNote }}</el-descriptions-item>
                <el-descriptions-item label="收货人员">{{ orderReturn.receiveMan }}</el-descriptions-item>
                <el-descriptions-item label="收货时间">{{ orderReturn.receiveTime }}</el-descriptions-item>
                <el-descriptions-item label="收货备注">{{ orderReturn.handleNote }}</el-descriptions-item>
            </el-descriptions>
        </el-card>
    </div>
</template>

<style scoped>
.order-detail {
    display: flex;
    flex-direction: column;
    gap: 16px; /* 根据需要调整间距 */
}

.el-card {
    margin: 0;
    padding: 0;
}

</style>